<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>蜗牛先生的聊天室</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background-color: #DDDDDD;
        }

        .chatroom {
            width: 1000px;
            height: 600px;
            display: flex;
            border-radius: 20px;
            overflow: hidden;
            opacity: 0.7;
            box-shadow: 0 0 3px 3px #BBBBBB;
        }

        .left {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            background-color: #F0F0F0;
        }

        .icon-container {
            height: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .icon-container img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 50%;
        }

        .self-container {
            height: 30%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            line-height: 60px;
        }

        .self-container .id {
            font-size: 30px;
            font-weight: bold;
        }

        .self-container .content {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            font-size: 22px;
        }

        .note-container {
            /*margin: 10px;*/
            padding: 5px;
            height: 30%;
            /*border-radius: 10px;*/
            /*background-color: white;*/
        }

        .right {
            /*border-left: 1px solid #888888;*/
            width: 70%;
            height: 100%;
            /*background-image: url(http://p4.so.qhmsg.com/bdr/_240_/t010d7efb6430fb56d9.jpg);*/
            background-color: #EEEEEE;
        }

        .right .head {
            height: 10%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            font-size: 22px;
            font-weight: bold;
        }

        .right .chat-container {
            padding: 10px;
            height: 80%;
            overflow-y: scroll;
            background-color: #F5F5F5;
            background-image: url(http://tool.uixsj.cn/qchan/uploads/2018/08/traffic_a_lot_of_cars_driving_across_the_golden_gate_bridge_free_stock_photos_picjumbo_HNCK2899_2210x1474.jpg);
            box-sizing: border-box;
        }

        /*滚动条样式*/

        .right .chat-container::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 8px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 8px;
        }

        .right .chat-container::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 2rem;
            /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
            background-color: #AAAAAA;
        }

        .right .chat-container::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            /*-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
            border-radius: 2rem;
            background-color: transparent;
        }

        .right .chat-container .message-self,
        .right .chat-container .message-other {
            padding: 10px;
            box-sizing: border-box;
        }

        .right .chat-container .message-self {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-end;
        }

        .right .chat-container .message-other {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            /*justify-content: flex-start;*/
        }

        .right .chat-container .message-container {
            max-width: 80%;
            /*height: auto;*/
            display: flex;
            flex-direction: row;
            /*box-sizing: border-box;*/
        }

        .right .chat-container .message-self .message-container .message-content {
            padding-right: 10px;
        }

        .right .chat-container .message-other .message-container .message-content {
            padding-left: 10px;
        }

        .right .chat-container .message-self .message-container .message-content .message {
            background-color: blue;
            color: white;
        }

        .right .chat-container .message-other .message-container .message-content .message {
            background-color: white;
            color: black;
        }

        .right .chat-container .message-container .message-content .name {
            font-size: 12px;
            padding: 5px 0;
            color: #888888;
        }

        .right .chat-container .message-self .message-container .message-content .name {
            text-align: right;
        }

        .right .chat-container .message-other .message-container .message-content .name {
            text-align: left;
        }

        .right .chat-container .message-container .message-content .message {
            border-radius: 10px;
            padding: 10px;
        }

        .right .chat-container .message-container .icon img {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 50%;
        }

        .right .chat-container .notify-container {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .right .chat-container .notify-container .notify {
            border-radius: 10px;
            padding: 5px 10px;
            background-color: #999999;
            opacity: 0.9;
            font-size: 12px;
            color: white;
        }

        .right .input-container {
            width: 100%;
            height: 10%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background-color: blue;
            font-size: 18px;
        }

        .right .input-container .input-content {
            position: relative;
            width: 85%;
            background-color: white;
        }

        .right .input-container .input-content input {
            border: 0;
            padding: 10px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            /* 去除input框外边框  */
            outline: none;
            font-size: 18px;
        }

        .right .input-container .input-content .num {
            position: absolute;
            right: 0;
            top: 0;
            width: 70px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1));
            font-weight: bold;
            color: #333333;
        }

        .right .input-container .input-content input::-webkit-input-placeholder {
            font-size: 18px;
        }

        .right .input-container .send {
            width: 15%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: orange;
            font-weight: bold;
        }
    </style>
</head>

<body>

<div class="chatroom">
    <!--左侧-->
    <div class="left">
        <h3>在线人数<span id="online_num">1</span></h3>
        <ul id="online_li">

        </ul>
    </div>
    <!--右侧-->
    <div class="right">

        <!--顶部固定导航-->
        <div class="head">聊天室(<span id="count">0</span>)</div>

        <!--聊天记录-->
        <div class="chat-container">
            {volist name="user_mes" id="v"}
            <div>
                <h3 style='margin-left: 30%;'>{$v['time']|date="M-d H:i:s",###}</h3>
                <span>{$v['msg']}</span>
            </div>
            {/volist}
        </div>

        <!--底部输入框-->
        <div class="input-container">

            <div class="input-content">
                <input id="msg" autofocus="autofocus" value="" oninput="inputMessage()" placeholder="请输入聊天内容…"/>
                <div class="num">0/30</div>
            </div>

            <div class="send" onclick="send()">发送</div>

        </div>

    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://wulv5.com/js/socket.io.min.js"></script>
<script>
    // 建立连接
    const socket = io.connect(":3000");
    const username = {$uid};

    //用户登录
    if (username) {
        $.post("{$Think.URL}{:url('ajax/join')}", {'username': username}, function (data) {
            console.log(data.user_list);
            socket.emit("join", {
                'type': "join",
                'username': username,
                'user_list': data.user_list,
                'count': data.count
            });
        })
    }
    socket.on('join', function (data) {
        console.log(data);
        user_list(data);
    })

    //用户退出
    socket.on('disconnection', function (data) {
        console.log(data);
        $.post("{$Think.URL}{:url('ajax/out')}", {'username': data.name, 'count': data.count}, function (data) {
            user_list(data);
        })
    })

    //用户列表数据
    function user_list(data) {
        $("#online_li").empty();
        $("#online_li").append(data.user_list);
        $("#online_num").text(data.count);
    }


    //发送消息
    function send() {
        var msg = $("#msg").val();
        $.post("{$Think.URL}{:url('ajax/send')}", {username: username, msg: msg}, function (data) {
            if (data.status == 200) {
                socket.emit("message", data.data)
            }
        })
    }
    socket.on("message", function (message) {
        console.log(message);
        $(".chat-container").append(message.data);
    })

    //
    //    // 如果监听到socket消息，那么执行该回调函数，并得到广播消息
    //    socket.on("message", function (message) {
    //        console.log(message)
    //        let html = '';
    //        //				const container = document.getElementsByClassName("chat-container");
    //        if (name == message.name) {
    //            html = '<div class="message-self"><div class="message-container"><div class="message-content"><div class="name">' + message.name + '</div><div class="message">' + message.msg + '</div></div><div class="icon"><img src="' + icon + '" /></div></div></div>';
    //        } else {
    //            html = '<div class="message-other"><div class="message-container"><div class="icon"><img src="' + icon + '" /></div><div class="message-content"><div class="name">' + message.name + '</div><div class="message">' + message.msg + '</div></div></div></div>';
    //        }
    //        $(".chat-container").append(html);
    //        scrollToBottom();
    //    });
    //
    //    // 接收到系统通知
    //    socket.on("joinNoticeSelf", function (message) {
    //        $("#count").text(message.count);
    //        id = message.id;
    //        $(".id").text(message.id + '号');
    //    });
    //
    //    // 接收到系统通知
    //    socket.on("joinNoticeOther", function (message) {
    //        console.log("joinNoticeOther：");
    //        console.log(message);
    //        $("#count").text(message.count);
    //        const msg = {
    //            name: message.name,
    //            action: message.action
    //        }
    //        notify(msg);
    //    });
    //
    //    // 断开连接回调事件
    //    socket.on("disconnection", function (message) {
    //        console.log(message);
    //        $("#count").text(message.count);
    //        const notifyMessage = {
    //            name: message.name,
    //            action: "退出了群聊"
    //        };
    //        notify(notifyMessage);
    //    });
    //
    //    document.onkeydown = function (event) {
    //        var e = event || window.event || arguments.callee.caller.arguments[0];
    //        if (e && e.keyCode == 13) { // enter 键
    //            send();
    //        }
    //    };
    //
    //    /**
    //     * 发送系统通知
    //     *
    //     * @param {Object} message
    //     */
    //    function notify(message) {
    //        const notify = '<div class="notify-container"><div class="notify"><span class="name">' + message.name + '</span>' + message.action + '</div></div>';
    //        $(".chat-container").append(notify);
    //        scrollToBottom();
    //    }
    //
    //    /**
    //     * 固定滚动条到底部
    //     */
    //    function scrollToBottom() {
    //        $(".chat-container").scrollTop($(".chat-container")[0].scrollHeight);
    //    }
    //
    //
    //    /**
    //     * 输入消息
    //     */
    //    function inputMessage() {
    //        const msg = $("#msg").val();
    //        const length = $("#msg").val().length;
    //        if (length > maxInput) {
    //            $("#msg").val(msg.substr(0, maxInput));
    //            $(".num").text(maxInput + '/' + maxInput);
    //        } else {
    //            const text = length + '/' + maxInput;
    //            $(".num").text(text);
    //        }
    //    }
    //
    //    /**
    //     * 发送消息
    //     */
    //    function send() {
    //        var msg = $("#msg").val();
    //
    //        if ("" == name) {
    //            getName();
    //        } else {
    //            if ("" == msg) {
    //
    //            } else {
    //                const message = {
    //                    id: id,
    //                    name: name,
    //                    msg: msg
    //                };
    //                // 通过socket发送消息
    //                socket.send(message);
    //                scrollToBottom();
    //                $("#msg").val("");
    //                $(".num").text('0/' + maxInput);
    //            }
    //        }
    //    }
</script>

</body>

</html>
